<style lang="scss" scoped>
    .login{
        position: relative;
    }
    .form{
        position: absolute;
        left: 0;
        right: 0;
        width: 360px;
        margin: 140px auto;
        border-top: 10px solid #409eff;
    
        .main{
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            padding: 20px;
            background-color: white;
            .head{
                text-align: center;
                img{
                    width: 60px;
                    height: 60px;
                }
            }
            h2{
                text-align: center;
                color: #409eff;
            }
            .user{
                display: flex;
                align-items: center;
                margin-bottom: 22px;
                margin-top: 20px;
                line-height: 40px;
                font-size: 14px;
                width: 100%;
                border: 1px solid #67c23a;
                img{
                    line-height: 40px;
                    width: 22px;
                }
                input{
                    border: 0;
                    outline: none;
                    padding: 0 15px;
                    width: 100%;
                    line-height: 40px;
                }
            }
            .btn{
                margin-bottom: 60px;
                text-align: center;
                line-height: 40px;
                position: relative;
                font-size: 14px;
                .oneBtn,
                .twoBtn{
                    line-height: 1;
                    height: 40px;
                    outline: 0;
                    margin: 0;
                    padding: 12px 20px;
                    border-radius: 4px;
                    width: 45%;
                    color: #fff;
                    border: 1px solid #dcdfe6;
                    background-color: #409eff;
                    border-color: #409eff;
                }
                .twoBtn{
                    margin-left: 10px;
                }
            }
        }
    }
    .image{
        background: #409eff;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin-top: 200px;
    }
</style>
<template>
    <div class="login">
        <div class="form">
            <div class="main">
                <div class="head">
                    <img src="@/assets/user/logo.png" alt="">
                </div>
                <h2>mall-admin-web</h2>
                <div class="user">
                    <img src="@/assets/user/user.png" alt="">
                    <input v-model="objPage.username" type="text" placeholder="请输入用户名">
                </div>
                <div class="user">
                    <img src="@/assets/user/password.png" alt="">
                    <input v-model="objPage.password" type="password" placeholder="请输入密码">
                    <img src="@/assets/user/unsee.png" alt="">
                </div>
                <div class="btn">
                    <button class="oneBtn" @click="loginSubmit()">登录</button>
                    <button class="twoBtn">获取体验账号</button>
                </div>
            </div>
        </div>
        <img class="image" src="@/assets/user/login_center.png" alt="">
    </div>
</template>
<script setup lang="ts">
    // ts 语法检测
    import { LoginApi } from "@/utils/types";
    // 使用reactive 
    import { reactive } from 'vue';
    // 导入接口
    import { Login } from '@/api/index';
    // 导入 elementplus的 消息提示的组件
    import { ElMessage } from 'element-plus';
    // 导入 stroe
    import { store } from '@/store/index';
    // 导入配置好的router
    import router from '@/router/index'
    // 创建store参数
    
    // 创建响应式的对象数据
    const objPage:LoginApi = reactive({
        username: '',
        password: ''
    })

    // 提交登录 void 是 ts 定义 函数类型的方式
    function loginSubmit():void {
        // 不需要 再使用objPage.value调用 被reactive定义的数据
        // 直接objPage.key
        // console.log(objPage.username);
        if(objPage.username.length <= 0){
            ElMessage.error('请输入用户名')
            return
        }
        if(objPage.password.length <= 0){
            ElMessage({
                message: '请输入密码',
                type: 'error',
                // 是否显示关闭按钮
                showClose: true
            })
            return
        }
        Login(objPage).then((res:any) => {
            // 判断 是否登录成功
            if(res.code === 200){
                // 改变token状态
                store.token = res.data.tokenHead + res.data.token;
                // 提示
                const msg:any = ElMessage.success('登录成功');
                // router 跳转
                setTimeout(() => {
                    // 关闭 提示
                    msg.close();
                    router.push('/');
                }, 1500);

            }else{
                ElMessage.error(res.message) 
            }
        })
    }
</script>
